<?php
session_start();
?>
<head>
<link rel="stylesheet" type="text/css" href="css/woogie.css">
<link rel="stylesheet" href="css/style.css">

<script type="text/javascript"
		src="js/script.js"></script>
<script language="javascript">
	startU();
	function checkNotification() {
		
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
				//alert(r);
				var v = r.split('%')[0];
				if (v != '0')
					document.getElementById('notifb').innerHTML = v;
				else
					document.getElementById('notifb').innerHTML = "";
				document.getElementById('woogie-notifications').innerHTML = r.split('%')[1];

				checkContactsTab();
			}
		  };
		  xmlhttp.open("GET","login/notification.php", true);
		xmlhttp.send();
	}
	
	function checkContacts() {
		
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
				
				var v = r.split('%')[0];
				var w = r.split('%')[1];
				document.getElementById('woogie-contacts').innerHTML = w;
			}
		  };
		  xmlhttp.open("GET","login/updateContacts.php", true);
		xmlhttp.send();
	}

	function checkContactsTab() {
		
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
				
				var v = r.split('%')[0];
				var w = r.split('%')[1];
				document.getElementById('woogie-tabs').innerHTML = v
			}
		  };
		  xmlhttp.open("GET","login/updateContacts.php", true);
		xmlhttp.send();
	}
	
	function update(id, cid, cn){
		
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			}
		  };
		  xmlhttp.open("GET","login/update.php?id="+id, true);
		xmlhttp.send();
		addTab(cid, cn);
	}
	
	function addTab(cid, cn){
		//alert(cid);
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
				//alert(r);
				//location.reload();
				getSMSFrom(cid);
			}
		  };
		  xmlhttp.open("GET","login/addTab.php?cid="+cid+"&cn="+cn, true);
		xmlhttp.send();
	}
	
	function getSMSFrom(cid){
		
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
				var v = r.split('%#%')[0];
				var w = r.split('%#%')[1];
				document.getElementById('woogie-content-center').innerHTML = v;
				document.getElementById('woogie-contact-profile').innerHTML = w;
				var objControl=document.getElementById("woogie-content-center-messages");
				objControl.scrollTop = objControl.scrollHeight;

				checkContactsTab();
			}
		  };
		  xmlhttp.open("GET","login/getSMSFrom.php?cid="+cid, true);
		xmlhttp.send();
	}
	
	function sendMessage(cid, number){
		var text = document.getElementById("textarea").value;
			var good;
		if (text.trim() == ""){
			good=confirm("You are about to send an empty message.\nDo you want to continue?");
			if (good==true){
				send(cid, number, text);
			}
		}
		else{
			send(cid, number, text);
		}
	}
	
	function send(cid, number, text){
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
				getSMSFrom(cid);
			}
		  };
		  
		  xmlhttp.open("GET","login/sendSMS.php?cid="+cid+"&number="+number+"&text="+text, true);
		xmlhttp.send();
	}
	
	function content(content)
	{
		if (content == "logout"){
			document.location = "login/logout.php";
		}
		else if (content == "home"){
			document.location = "/home";
		}
	}
	
	function showProfile()
	{
		
	}
	
	function removeTab(id)
	{
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				location.reload();
			}
		  };
		  xmlhttp.open("GET","login/removeTab.php?cid="+id, true);
		xmlhttp.send();
	}
	
	function removeAll(){
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				location.reload();
			}
		  };
		  xmlhttp.open("GET","login/removeAllTabs.php", true);
		xmlhttp.send();
	}
	var showN = 0;
	function show() {
		if (showN == 0){
			document.getElementById('woogie-notifications').style.display = "block";
			var objControl=document.getElementById("woogie-notifications");
			objControl.scrollTop = objControl.scrollHeight;	
			showN = 1;
		}
		else{
			hide();
		}
	  }
	  function hide(id) {
		document.getElementById('woogie-notifications').style.display = "none";
		showN = 0;
	  }
	var showM = 0;
	function showMenu() {
		if (showM == 0){	
			document.getElementById('woogie-tab-menu').style.display = "block";
			showM = 1;
		}
		else{
			hideMenu();
		}
	  }
	  function hideMenu(id) {
		document.getElementById('woogie-tab-menu').style.display = "none";
		showM = 0;
	  }
	function startU(){
		checkNotification();
	}
	function deleteMessage(id)
	{
		alert(id);
	}
	function showContacts(){
		checkContacts();
		if (document.getElementById('woogie-content-right').style.display == "block")
		{
			document.getElementById('woogie-content-right').style.display = "none";
		}
		else {
			document.getElementById('woogie-content-right').style.display = "block";
		}
	}
	
	function showProfile(){
		document.getElementById("screen").style.display = "block";
		document.getElementById("profile").style.display = "block";
		
	}
	function hideProfile(){
		showP = 0;
		document.getElementById("screen").style.display = "none";
		document.getElementById("profile").style.display = "none";
	}
	function edit(but)
	{
		if (but == "name")
		{
			document.getElementById("editName").style.display = "none";
			document.getElementById("saveName").style.display = "block";
			document.getElementById("name").disabled=false;
		}
		else if (but == "email")
		{
			document.getElementById("editEmail").style.display = "none";
			document.getElementById("saveEmail").style.display = "block";
			document.getElementById("email").disabled=false;
		}
	}
	function save(but)
	{
		if (but == "name")
		{
			document.getElementById("editName").style.display = "block";
			document.getElementById("saveName").style.display = "none";
			document.getElementById("name").disabled=true;
			var val = document.getElementById("name").value;
			userUpdate("displayName", val);
		}
		else if (but == "email")
		{
			document.getElementById("editEmail").style.display = "block";
			document.getElementById("saveEmail").style.display = "none";
			document.getElementById("email").disabled=true;
			var val = document.getElementById("email").value;
			userUpdate("email", val);
		}
	}

	function userUpdate(key, val)
	{
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		  {
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				var r = xmlhttp.responseText.trim();
			}
		  };
		  xmlhttp.open("GET","login/userUpdate.php?key="+key+"&val="+val, true);
		xmlhttp.send();
	}
	function hideAll()
	{
		hideMenu();
		hide();
	}
	
</script>
</head>
<body>
<div class="woogie-top">
<div class="woogie-header" id="woogie-header" onmouseover="startU()">
	<div class="woogie-header-left" onclick="content('home')">
		<img title="Home" class="woogie-header-img" src="images/home_icon.png"/>
		<img title="" class="woogie-header-img-logo" src="images/logo.png"/>
		<img title="" class="woogie-header-img-beta" src="images/beta.png"/>
	</div>
	<?php
		if (isset($_SESSION['number'])){
	?>
	<div class="woogie-header-right">
		<!--
		<img onclick="content('messages')" title="Messages" class="woogie-header-img" src="images/messages.png"/>
		<img onclick="content('calls')" title="Calls" class="woogie-header-img" src="images/calls.png"/>
		-->
		
		<div class="woogie-notif">
			<img class="woogie-header-img" onclick="show()" title="Notifications" src="images/speech.png"/>
			<p class="notifb" id="notifb"></p>
		</div>
		<img onclick="showProfile()" title="User Settings" class="woogie-header-img" src="images/user.png"/>
		<img onclick="content('logout')" title="Logout" class="woogie-header-img" src="images/log_out.png"/>
	</div>
	<?php
		}
	?>
</div>
<?php
	if (isset($_SESSION['number'])){
?>
<div class="bar">
<img title="Menu" class="woogie-menu-img" id="woogie-contact-img-hide" src="images/menu.png" onclick="showMenu()"/>
<div class="woogie-tabs" id="woogie-tabs">
</div>
</div>
</div>
<div class="woogie-below" onclick="hideAll()">
<div class="woogie-content-left" id="woogie-content-left">
	<div class="woogie-contact-profile" id="woogie-contact-profile">
	</div>
 </div>
 <div class="woogie-content-center" id="woogie-content-center" onhover="startU()">
 </div>
 <script>
checkContacts();
</script>
 <div class="woogie-content-right" id="woogie-content-right" onmouseover="startU()">
	<div class="woogie-search"><input type="text" id="search" placeholder="Search" onkeyup="doSearch()"/></div>
	<div class="woogie-contacts-div">
	<table class="woogie-contacts" id="woogie-contacts">
	</table>
	</div>
 </div>
 <ul class="woogie-notifications" id="woogie-notifications"></ul>

 <ul class="woogie-tab-menu" id="woogie-tab-menu">
 	<li onclick="removeAll()">Remove All Tabs</li>
	<!--<li onclick="">Locate my Device</li>
	<li onclick="">Secure my Device</li>-->
 </ul>
 <!--
<div class="woogie-content">
 <div class="woogie-content-left">
	<div class="woogie-calls">
		<div class="woogie-calls-title">
			Call from:
		</div>
		<div class="woogie-call-list">
			<div class="woogie-call">
				<div class="woogie-call-name">+15149991234(Contact Name)</div>
				<div class="woogie-call-time">Thu, 20 March 2014 (14:46)</div>
			</div>
		</div>
	</div>
	<div class="woogie-activities">
		<div class="woogie-activities-title">
			User Activity:
		</div>
		<div class="woogie-activity-list">
			<div class="woogie-activity">
				<div class="woogie-activity-name">New Call from:</div>
				<div class="woogie-activity-data">+15149991234(Contact Name)</div>
				<div class="woogie-activity-time">Thu, 20 March 2014 (14:46)</div>
			</div>
			<div class="woogie-activity">
				<div class="woogie-activity-name">New Message from:</div>
				<div class="woogie-activity-data">+15149991234(Contact Name)</div>
				<div class="woogie-activity-time">Thu, 20 March 2014 (14:46)</div>
			</div>
		</div>
	</div>
 </div>
 
 <div class="woogie-content-right">
	<div class="woogie-contacts">
		<table>
			<tr>
				<td class="contact">
					<div class="woogie-contact">
						<div class="woogie-contact-left">
							<img src="images/user_sms.png"/>
						</div>
						<divar r = xmlhttp.responseText.trim();
				getSMSFrom(cid);v class="woogie-contact-right">
							<div class="woogie-contact-name">Contact Name</div>
							<div class="woogie-contact-number">+15141231234</div>
							<div class="woogie-contact-right-new">
								<img src="images/messages.png"/>
							</div>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div class="woogie-search"><input type="text" placeholder="Search"/></div>
 </div>
 <br style="clear: left;" />
</div>-->
<?php
	}
	else{
		echo "<br><p style='color:gray;'>Login from the <a href='../'>HOME</a> page by clicking on LAUNCH MY WOOGIE PAGE</p>";
	}
?>
<div class="screen" id="screen"></div>
<div class="profile" id="profile">
	<div class="header">
	  <h1>User Settings</h1>
	  <img src="../images/close.png" onclick="hideProfile()" title="Close"/>
	</div>
	<div class="form">
		<form>
			<table class="woogie-user-settings">
				<tr>
					<td><h1>Display Name:</h1></td>
					<td><input name="name" id="name" type="text" disabled value="<?php echo $_SESSION['display']?>"/></td><td><a class="saveName" id="saveName" onclick="save('name')">Save</a><a class="editName" id="editName" onclick="edit('name')">Edit</a></td>
				</tr>
				<tr>
					<td><h1>Email:</h1></td>
					<td><input name="email" id="email" type="text" disabled value="<?php echo $_SESSION['email']?>"/></td><td><a class="editEmail" id="editEmail" onclick="edit('email')">Edit</a><a class="saveEmail" id="saveEmail" onclick="save('email')">Save</a></td>
				</tr>
				<tr>
					<td><h1>Phone Number:</h1></td>
					<td><input name="number" id="number" type="text" disabled value="<?php echo $_SESSION['number']?>"/></td>
				</tr>
				<tr>
					<td><h1>Message Transfer #:</h1></td>
					<td><input name="email" type="text" disabled/></td>
				</tr>
				<tr>
					<td><h1>Call Transfer #:</h1></td>
					<td><input name="email" type="text" disabled/></td>
				</tr>
			</table>
		</form>
	</div>
</div>
</div>
</body>
<script>checkContacts();</script>
